<template>
  <div class="home">
    <el-container class="Home-content">
      <el-aside style="width: 240px" class="AsideCss">
        <div class="asideTitle">
          <img src="../../assets/img/bmwlogo.png" alt="" />
          BMW智能AI训练平台
        </div>
        <el-menu default-active="1-1" class="el-menu-vertical-demo" background-color="#465161" text-color="#fff" active-text-color="#fff">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span>机油保养邀约</span>
            </template>
            <el-menu-item index="1-1" @click="STUDY('1')">学习与考试</el-menu-item>
            <el-menu-item index="1-2" @click="STUDY('2')">设置</el-menu-item>
          </el-submenu>
          <!-- <el-menu-item index="2">
            <i class="el-icon-user-solid"></i>
            <span>后台设置</span>
          </el-menu-item> -->
        </el-menu>
      </el-aside>
      <el-container style="background-color: #f2f2f2">
        <el-header class="HeaderCss">
          <div>
            <div>
              <i class="el-icon-user-solid"></i>
              <span>管理员</span>
            </div>
          </div>
        </el-header>
        <el-main class="elmain">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  name: 'Home',
  methods: {
    loginOut() {
      this.$router.push({
        name: 'Login',
      });
    },

    STUDY(TYPE) {
      console.log(this.$route);

      this.checkShowdata(TYPE);
      if (this.$route.name != 'AboutTwo') {
        this.$router.push({ name: 'AboutTwo' });
      }
    },

    menuselect(e) {
      // console.log(e);
      // this.Checkid({ id: e });
      // this.$router.push({
      //   name: 'About',
      // });
    },
    ...mapMutations(['checkShowdata']),
  },
};
</script>
<style lang="less" scoped>
.home {
  height: 100%;
  min-height: 100%;
}
.AsideCss {
  background-color: #465161;
  box-sizing: border-box;
  overflow: hidden !important;
}
.Home-content {
  height: 100%;
}
.el-menu {
  border: none !important;
}
.menu-i i {
  color: aliceblue;
}
.HeaderCss {
  height: 60px;
  background: #9e0018;
  color: #fff;
  div {
    color: #fff;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    span {
      padding: 0 5px;
    }
  }
}
.contentCss {
  box-sizing: border-box;
  padding: 8px;
  .AsideCss {
    background-color: #fff;
    height: 100%;
  }
}

.AsideCss .el-menu-item.is-active {
  background-color: #9e0018 !important;
}
.asideTitle {
  padding: 18px 0;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 29px;
    height: 29px;
    vertical-align: middle;
    display: block;
    margin-right: 10px;
  }
}
.main-NAV {
  font-size: 14px;
  padding: 17px 0 14px;
}
.elmain {
  box-sizing: border-box;
  margin: 0 16px;
  background-color: #fff;
  padding: 14px 9px;
}
</style>
